<!--
  功能：初始化功能描述
  作者：zichen-jiang
  邮箱：18307106535@163.com
  版本：v1.0.2
  修改内容：vue2.0初始化模板
  修改人员：zicheng-jiang
  修订时间：2020.10.01
  组件生成时间：2022年06月23日 15:14:58
-->
<template>
  <div class="swiperAdmin">
    <a-upload name="avatar" :show-upload-list="false" :customRequest="uploadImg">
      <a-button type="primary" icon="plus">新增轮播图</a-button>
    </a-upload>

    <a-table
      :columns="columns"
      :data-source="data"
      style="height: 100%"
      :rowKey="
        (record, index) => {
          return record.brNo + '-' + index;
        }
      "
      :loading="loading"
      ><span slot="imgUrl" slot-scope="imgUrl" class="imgUrl">
        <img
          :src="baseUrl + imgUrl"
          alt
          preview="1"
          width="30px"
          height="30px"
          title="查看"
        />
      </span>
      <span slot="action" slot-scope="text, record" class="actone">
        <a-popconfirm
          title="确定删除图片？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="deleteclass(record)"
          @cancel="cancel"
        >
          <a-icon type="delete" title="删除" />
        </a-popconfirm>
      </span>
    </a-table>
  </div>
</template>
<script>
//import(导入)其他文件（如：组件，工具js，第三方插件js，json文件，图片文件等）
import { requset } from "@/api";
import { uploads } from "@/utils/upload";
export default {
  name: "swiperAdmin",
  /**注册组件*/
  components: {},
  /**接受父组件传值*/
  props: {},
  data() {
    return {
      baseUrl: process.env.VUE_APP_API_BASE_URL,
      loading: false,
      data: [],
      columns: [
        {
          title: "图片",
          dataIndex: "url",
          key: "url",
          align: "center",
          scopedSlots: { customRender: "imgUrl" },
        },

        {
          title: "ID",
          dataIndex: "id",
          align: "center",
          key: "id",
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ],
    };
  },
  /**计算属性*/
  computed: {},
  /**监听data数据变化*/
  watch: {},
  /**创建组件时执行(有VM对象this)*/
  created() {},
  /**加载完组件时执行(主要预处理数据)*/
  mounted() {
    this.getlist();
  },
  /**所有方法*/
  methods: {
    cancel(e) {},

    deleteclass(item) {
      let params = {
        id: item.id,
        url: item.url,
      };
      requset("post", "/swiper/deleteSwiper", params).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.getlist();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    getlist() {
      requset("get", "/swiper/list", {}).then((res) => {
        if (res.data.code == 200) {
          this.data = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 文件上传
    uploadImg(upload) {
      uploads("/swiper/uploads", upload.file, this.imageUrl).then((res) => {
        if (res.data.code == 200) {
          this.imageUrl = res.data.imgUrl;
          let params = {
            url: res.data.imgUrl,
          };
          this.updateUser(params);
          this.$message.success(res.data.msg);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    updateUser(params) {
      requset("post", "/swiper/create", params).then((res) => {
        if (res.data.code == 200) {
          this.getlist();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.actone {
  color: #1890ff;
  font-size: 15px;
  cursor: pointer;
}
</style>
